<template>
<!-- 急诊PCI(已废弃) -->
    <div >
        <div class="header">
            <div class="header-left" @click="finish"><image :src="titleUrl" class="header-left-img"></image></div>
            <div class="header-center"><text class="header-text">急诊(紧急)PCI</text></div>
            <div class="header-right" @click="save"><text class="header-right-text">保存</text></div>
        </div>
        <scroller>
            <div class="content">                                                             
                <div class="box">                            
                    <div class="line">                    
                        <div class="title-max"><text class="box-text">决定医生:</text></div>
                        <div class="input">
                            <input type="text" class="input-text" v-model="resData.DOCTOR_NAME"></input>
                        </div>
                    </div>
                    <div class="line">
                        <div class="title-max"><text class="box-text">介入人员:</text></div>
                        <div class="input">
                            <input type="text" class="input-text" v-model="resData.INTERVENTION_PERSON"></input>
                        </div>
                    </div>
                </div>                                                             
                <div class="box">                            
                    <div class="line">                    
                        <div class="title-max"><text class="box-text">决定介入手术时间:</text></div>
                        <div class="input" @click="getTime('DECISION_OPERATION_TIME')">
                            <text class="input-text">{{resData.DECISION_OPERATION_TIME | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                    <div class="line">
                        <div class="title-max"><text class="box-text">启动导管室时间:</text></div>
                        <div class="input" @click="getTime('START_CONDUIT_TIME')">
                            <text class="input-text">{{resData.START_CONDUIT_TIME | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                </div> 
                <div class="box">                            
                    <div class="line">                    
                        <div class="title-max"><text class="box-text">开始知情同意时间:</text></div>
                        <div class="input" @click="getTime('START_AGREE_TIME')">
                            <text class="input-text">{{resData.START_AGREE_TIME | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                    <div class="line">
                        <div class="title-max"><text class="box-text">签署知情同意时间:</text></div>
                        <div class="input" @click="getTime('SIGN_AGREE_TIME')">
                            <text class="input-text">{{resData.SIGN_AGREE_TIME | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                </div> 
                <div class="box">                            
                    <div class="line">                    
                        <div class="title-max"><text class="box-text">导管室激活时间:</text></div>
                        <div class="input" @click="getTime('ACTIVATE_CONDUIT_TIME')">
                            <text class="input-text">{{resData.ACTIVATE_CONDUIT_TIME | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                    <div class="line">
                        <div class="title-max"><text class="box-text">患者到达导管室时间:</text></div>
                        <div class="input" @click="getTime('ARRIVE_CONDUIT_TIME')">
                            <text class="input-text">{{resData.ARRIVE_CONDUIT_TIME | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                </div> 
                <div class="box">                            
                    <div class="line">                    
                        <div class="title-max"><text class="box-text">开始穿刺时间:</text></div>
                        <div class="input" @click="getTime('START_PUNCTURE_TIME')">
                            <text class="input-text">{{resData.START_PUNCTURE_TIME | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                    <div class="line">
                        <div class="title-max"><text class="box-text">穿刺成功时间:</text></div>
                        <div class="input" @click="getTime('SUCCESS_PUNCTURE_TIME')">
                            <text class="input-text">{{resData.SUCCESS_PUNCTURE_TIME | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                </div> 
                <div class="box">                            
                    <div class="line">                    
                        <div class="title-max"><text class="box-text">造影开始时间:</text></div>
                        <div class="input" @click="getTime('START_RADIOGRAPHY_TIME')">
                            <text class="input-text">{{resData.START_RADIOGRAPHY_TIME | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                    <div class="line">
                        <div class="title-max"><text class="box-text">造影结束时间:</text></div>
                        <div class="input" @click="getTime('END_RADIOGRAPHY_TIME')">
                            <text class="input-text">{{resData.END_RADIOGRAPHY_TIME | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                </div> 
                <div class="box">                            
                    <div class="line">                    
                        <div class="title-max"><text class="box-text">球囊扩张时间:</text></div>
                        <div class="input" @click="getTime('BALLOON_EXPANSION_TIME')">
                            <text class="input-text">{{resData.BALLOON_EXPANSION_TIME | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                    <div class="line">
                        <div class="title-max"><text class="box-text">手术结束时间:</text></div>
                        <div class="input" @click="getTime('END_OPERATION_TIME')">
                            <text class="input-text">{{resData.END_OPERATION_TIME | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                </div>
                <div class="box">                            
                    <div class="line">                    
                        <div class="title-max"><text class="box-text">D to B时间:</text></div>
                        <div class="input">
                            <text class="input-text">{{DTWOB_TIME}}</text>
                            <text class="input-unit">min</text>
                        </div>
                    </div>
                    <div class="line"></div>                    
                </div>
            </div>
        </scroller>       
    </div>
</template>
<script>
    import WeexNativeModule from "../../common/WeexNativeModule"
    import DateUtil from "../../common/util/DateUtil"
    import StringUtils from "../../common/util/StringUtils"
    import JsonFilter from "../../common/util/JsonFilter"
    import ACApi from "../../common/http/ACApi"
    import Resource from "../../../dist/res/Resource"
    export default {
        name: 'EMNewMainEditInfo',
        data: function () {   
            return {
                titleUrl: Resource.getResource('title_cha_img.png'),
                imgUrl: Resource.getResource('choose.png'),
                arriveTime: '',
                DTWOB_TIME: '',
                resData: {
                    ORDER_ID: '',
                    DOCTOR_NAME: '',
                    INTERVENTION_PERSON: '',
                    DECISION_OPERATION_TIME: '',
                    START_CONDUIT_TIME: '',
                    START_AGREE_TIME: '',
                    SIGN_AGREE_TIME: '',
                    ACTIVATE_CONDUIT_TIME: '',
                    ARRIVE_CONDUIT_TIME: '',
                    START_PUNCTURE_TIME: '',
                    SUCCESS_PUNCTURE_TIME: '',
                    END_RADIOGRAPHY_TIME: '',
                    INTERVENTION_PERSON: '',
                    BALLOON_EXPANSION_TIME: '',
                    END_OPERATION_TIME: '',
                    DTWOB_TIME: ''
                }            
            }                                           
        },
        mounted: function() {
            let _this = this
            WeexNativeModule.showProgressDialog('请稍等')
            WeexNativeModule.getParam(function (data) {
                // WeexNativeModule.alert(data)
                let param = JSON.parse(data.param)            
                _this.resData.ORDER_ID = param.taskcode 
                if(param.arriveTime) {
                    _this.arriveTime = param.arriveTime
                }
                if(param.selfcometime) {
                    _this.arriveTime = param.selfcometime
                }
                _this.getPcis()
            })
        },
        computed: {
            DTWOB_TIME: function() {
                let _this = this
                let value
                // 球囊扩张时间
                let BALLOON_EXPANSION_TIME = _this.resData.BALLOON_EXPANSION_TIME ? new Date(_this.resData.BALLOON_EXPANSION_TIME) : ''
                // 到达本院大门
                let ARRIVED_HOSPITAL_TIME = _this.arriveTime ? new Date(_this.arriveTime) : ''
                _this.resData.DTWOB_TIME = ''
                if(BALLOON_EXPANSION_TIME && ARRIVED_HOSPITAL_TIME) {
                    value = (BALLOON_EXPANSION_TIME - ARRIVED_HOSPITAL_TIME)/1000/60
                    _this.resData.DTWOB_TIME = value
                }			
			    return _this.resData.DTWOB_TIME
            }
        },
        filters: {
            filterTime: function(item) {
                if(item) {
                    let time = DateUtil.formatTime(item,'yyyy-MM-dd hh:mm')
                    return time
                }
            }
        },
        methods: {
            finish: function() {
                WeexNativeModule.finish()
            },
            getTime: function(type) {
                let _this = this
                let defaultdate
                let typeTime
                for(let key in _this.resData) {
                    if(key == type) {
                        typeTime = _this.resData[key]
                    }
                }
                if(!StringUtils.isEmpty(typeTime)){
                    defaultdate = DateUtil.formatTime(
                        new Date(_this.tourniquetTime),'yyyy-MM-dd hh:mm');
                }else {
                    defaultdate = DateUtil.formatTime(
                        new Date(),'yyyy-MM-dd hh:MM');
                }
                WeexNativeModule.selectDateTime(defaultdate,false,true,true,true,true,false,false,"","",function(time) {
                    for(let key in _this.resData) {
                        if(key == type) {
                            _this.resData[key] = time.data
                        }
                    }
                })
            },
            getPcis: function() {
                let _this = this
                ACApi.getPcis(_this.resData.ORDER_ID,{
                    onSuccess: function(res) {
                        let data = JSON.parse(res)
                        if(data.msg == '成功') {
                            for(let key in _this.resData) {
                                for(let _key in data.result) {
                                    if(key == _key) {
                                        _this.resData[key] = data.result[_key]
                                    }
                                }
                            }
                        }
                        WeexNativeModule.dimissProgressDialog()
                    },
                    onError: function(msg) {
                        WeexNativeModule.dimissProgressDialog()
//                        WeexNativeModule.alert(msg)
                    }
                })
            },
            save: function() {
                let _this = this
                let postjson = JsonFilter.filter(_this.resData)
                WeexNativeModule.showProgressDialog('数据提交中...')
                ACApi.pcis(postjson,{
                    onSuccess: function(data) {
                        WeexNativeModule.dimissProgressDialog()
                        WeexNativeModule.toast('提交成功')
                    },
                    onError: function(msg) {
                        WeexNativeModule.dimissProgressDialog()
//                        WeexNativeModule.alert(msg)
                    }
                })
            }
        }
    }
</script>
<style>
    .header {
        height: 40px;
        background-color: #FFF;
        display: flex;
        flex-direction: row;
        justify-content: space-between;    
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #ccc;
    }
    .header-left {
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
    }
    .header-left-img {
        width: 30px;
        height: 30px;  
    }
    .header-right {
        width: 80px;
        height: 25px;
        background-color: #4c7fd8;
        margin-right: 20px;  
        border-radius: 2px;     
    }
    .header-text {
        font-size: 13px;
        color: #666;
    }
    .header-right-text {
        font-size: 13px;
        color: #FFF;
        text-align: center;
        line-height: 25px;       
    }

    .content {
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 20px;
        box-sizing: border-box;
    }
    .box {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;   
        height: 40px;
        align-items: center;
    }
    .box-text {
        font-size: 12px;
        color: #666;
    }
    .line {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
    }
    .title-max {
        width: 120px;
    }
    .input {
        position: relative;
        flex: 1;
        box-sizing: border-box;
        padding-left: 8px;
        height: 25px;       
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
    }
    .input-text {  
        color: #666;
        line-height: 22px;     
        font-size: 12px;
    }
    .input-unit {
        position: absolute;
        color: #666;
        font-size: 12px;
        top: 4px;
        right: 5px;
    }
    .img-unit {
        position: absolute;                  
        top: 3px;
        right: 5px;
        width: 8px;
        height: 16px;
    }
</style>

